<template>
	<view>
		<view class="page-container">
			<view class="header">
				<view class="header-air">
					<view>
						空气质量 - {{weather.air_level}}
					</view>
					<view>
						<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="18" color="#ffffff"></uni-icons>
						{{address}}
					</view>
				</view>
				<view class="header-title">
					<view> {{weather.air}}</view>
					<view @click="gowea()">
						{{weather.wea}} {{weather.tem}}°c
					</view>
				</view>

				<view class="header-title1">
					<view> 空气湿度:{{weather.humidity}}</view>
					<view @click="gowea()">
						<uni-icons custom-prefix="iconfont" type="icon-wenduzengjia" size="18" color="#ffffff"></uni-icons>
						{{weather.tem2}} {{weather.tem1}}°c
					</view>
				</view>

				<view class="header-ad0">
					<view>今天-{{weatherdetali.waichu}}</view>
					<view class="header-ad-onst">
						<block v-if="onst">
							<uni-icons custom-prefix="iconfont" type="icon-chenggong" size="18"
								color="#55ff00"></uni-icons>
							<text>设备已连接</text>
						</block>
						<block v-else>
							<uni-icons custom-prefix="iconfont" type="icon-cuowu" size="18" color="#ff0000"></uni-icons>
							<text>设备未连接</text>
						</block>
					</view>
				</view>
				<view class="header-ad-onst-time">
					<uni-dateformat :date="timer" format="hh:mm:ss"></uni-dateformat>
					<view class="header-warn" @click="gosetparam">
						<uni-icons custom-prefix="iconfont" type="icon-jinggao" size="18" color="#ffaa00"></uni-icons>
						<text>温度:{{tempmax}} 湿度:{{humimax}}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="data-container">
			<view class="data-card">
	<view class="data-card-icon">
		<uni-icons custom-prefix="iconfont" type="icon-daqiwendu" size="38" color="#3d7ef9"></uni-icons>
	</view>
				<view>
					<view class="date-card-title">温度</view>
					<view class="data-card-value">{{temp}} °C</view>
				</view>
			</view>
			
			<view class="data-card">
				<view class="data-card-icon">
					<uni-icons custom-prefix="iconfont" type="icon-daqishidu" size="38" color="#3d7ef9"></uni-icons>
				</view>
				<view>
					<view class="date-card-title">湿度</view>
					<view class="data-card-value">{{humi}} %</view>
				</view>
			</view>
			
			<view class="data-card">
				<view class="data-card-icon">
					<uni-icons custom-prefix="iconfont" type="icon-sensor-guangzhao" size="38" color="#3d7ef9"></uni-icons>
				</view>
				<view>
					<view class="date-card-title">光照强度</view>
					<view class="data-card-value">{{light}} Lx</view>
				</view>
			</view>

			<view class="data-card">
				<view class="data-card-icon">
					<uni-icons custom-prefix="iconfont" type="icon-deng" size="38" color="#3d7ef9"></uni-icons>
				</view>
				<view>
					<view class="date-card-title">灯</view>
					<view class="data-card-value">
						<switch :checked="led" @change="onledsw"></switch>
					</view>
				</view>
			</view>

			<view class="data-card">
				<view class="data-card-icon">
					<uni-icons custom-prefix="iconfont" type="icon-shengguangbaojingqi" size="38" color="#3d7ef9"></uni-icons>
				</view>
				<view>
					<view class="date-card-title">报警器</view>
					<view class="data-card-value">
						<switch :checked="bee" @change="onbeesw"></switch>
					</view>
				</view>
			</view>

			<view class="data-card">
				<view class="data-card-icon">
					<uni-icons custom-prefix="iconfont" type="icon-jidianqi" size="38" color="#3d7ef9"></uni-icons>
				</view>
				<view>
					<view class="date-card-title">继电器</view>
					<view class="data-card-value">
						<switch :checked="jdq" @change="onjdqsw"></switch>
					</view>
				</view>
			</view>
			
			<view class="data-card">
				<view class="data-card-icon">
					<uni-icons custom-prefix="iconfont" type="icon-xiaoxi" size="38" color="#3d7ef9"></uni-icons>
				</view>
				<view>	
					<view class="date-card-title">蜂鸣器状态</view>
					<view class="data-card-value">
						<switch :checked="beest" @change="beestsw"></switch>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// const crypto = require('crypto');
	export default {

		data() {
			return {
				address: '',
				token: 'version=2022-05-01&res=userid%2F378829&et=1745595703&method=sha1&sign=MbkKStlGzWOmL1%2BbgO3bkDcCYYQ%3D',
				temp: '36',
				humi: '99',
				light:'1145',
				led: true,
				bee: false,
				jdq:false,
				beest:false,
				onst: false, //是否连你单片机
				timer: "",
				nowtime: "",
				now: Date.now(),
				weather: {},
				weatherdetali: {},
				tempmax: "",
				humimax: ""
			}
		},
		onLoad() {

		},
		onShow() {
			this.getweather();
			this.fetchdata();
			this.getaddress();
			setInterval(() => {
				this.fetchdata();
			}, 5000)
			// setInterval(()=>{
			// 	this.getnowtime():
			// },1000)
		},

		methods: {
			getaddress() {
				uni.request({
					url: 'https://www.ip.cn/api/index?ip&type=0',
					success: (res) => {
						console.log(res);
						console.log(res.data.address);
						let adress = res.data.address;
						// 使用split方法将字符串按空格分割成数组
						let adressArray = adress.split(" ");
						// 提取"四川省"和"攀枝花市"这两部分
						let province = adressArray[2]; // 四川省
						let city = adressArray[3]; // 攀枝花市
						console.log("省份：" + province); // 输出：省份：四川省
						console.log("城市：" + city); // 输出：城市：攀枝花市
						this.address = province + " " + city
					}
				})
			},
			getweather() {

				uni.request({
					url: 'http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=73989722&appsecret=bsGSaD85',
					method: 'GET',
					success: (res) => {
						console.log("天气", res);
						this.weather = res.data
						this.weatherdetali = res.data.aqi
					}
					// data:{
					// 	unescape = "1",
					// 	version = "v61",
					// 	appid = "73989722",
					// 	appsecret = "bsGSaD85",
					// 	cityid = "510400000000",

					// }
				})
			},
			gowea() {
				console.log("跳转到天气");
				uni.navigateTo({
					url: "/pages/weather/weather"
				})
			},
			gosetparam() {
				console.log("跳转到设置参数");
				uni.navigateTo({
					url: "/pages/Setparam/Setparam"
				})
			},
			fetchdata() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
					method: 'GET',
					data: {
						product_id: 'zy1NTZomN9',
						device_name: 'd1'
					},
					header: {
						'authorization': this.token
					},
					success: (res) => {
						console.log(res.data);
						const data = res.data.data;

						const testValue = data.find(
							(item) => item.identifier === "test"
						).value;
						const lightValue = data.find(
							(item) => item.identifier === "light"
						).value;
						const humiValue = data.find(
							(item) => item.identifier === "humi"
						).value;
						const beeValue = data.find(
							(item) => item.identifier === "bee"
						).value;
						const jdqValue = data.find(
							(item) => item.identifier === "jdq"
						).value;						
						const beestValue = data.find(
							(item) => item.identifier === "beest"
						).value;						
						const ledValue = data.find(
							(item) => item.identifier === "led"
						).value;
						const tempmaxValue = data.find(
							(item) => item.identifier === "tempmax"
						).value;
						const humimaxValue = data.find(
							(item) => item.identifier === "humimax"
						).value;

						this.humi = humiValue;
						this.light = lightValue;
						this.bee = beeValue === 'true' ? true : false;
						this.jdq = jdqValue === 'true' ? true : false;
						this.beest = beestValue === 'true' ? true : false;
						this.led = ledValue === 'true' ? true : false;
						this.temp = testValue;
						this.tempmax = tempmaxValue;
						this.humimax = humimaxValue;

						// this.humi = res.data.data[1].value;
						// this.bee = res.data.data[0].value === 'true' ? true : false;
						// this.led = res.data.data[2].value === 'true' ? true : false;	
						let time = res.data.data[0].time
						this.timer = time
						let timeString = time.toString();
						let timer = timeString.slice(0, -3);
						let currentTime = Date.now()
						// console.log(currentTime);
						// console.log(time);
						let timeDifference = currentTime - time;
						if (timeDifference < 10000) {
							this.onst = true;
							console.log("时间差小于 10 秒");
						} else {
							this.onst = false;
							console.log("时间差大于等于 10 秒");
						}
					},
				})
			},
			onledsw(event) {
				console.log(event.detail.value);
				let ledsw = event.detail.value
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
					method: 'POST',
					data: {
						product_id: 'zy1NTZomN9',
						device_name: 'd1',
						params: {
							"led": ledsw
						}
					},
					header: {
						'authorization': this.token
					},
					success: (res) => {
						console.log(res.data);
					}
				})
			},
			onbeesw(event) {
				console.log(event.detail.value);
				let beesw = event.detail.value
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
					method: 'POST',
					data: {
						product_id: 'zy1NTZomN9',
						device_name: 'd1',
						params: {
							"bee": beesw
						}
					},
					header: {
						'authorization': this.token
					},
					success: (res) => {
						console.log(res.data);
					}
				})
			},
			onjdqsw(event) {
				console.log(event.detail.value);
				let jdqsw = event.detail.value
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
					method: 'POST',
					data: {
						product_id: 'zy1NTZomN9',
						device_name: 'd1',
						params: {
							"jdq": jdqsw
						}
					},
					header: {
						'authorization': this.token
					},
					success: (res) => {
						console.log(res.data);
					}
				})
			},			
			beestsw(event) {
				console.log(event.detail.value);
				let beestsw = event.detail.value
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
					method: 'POST',
					data: {
						product_id: 'zy1NTZomN9',
						device_name: 'd1',
						params: {
							"beest": beestsw
						}
					},
					header: {
						'authorization': this.token
					},
					success: (res) => {
						console.log(res.data);
					}
				})
			}			
		}
	}
</script>

<style>
	@import "@/static/iconfont.css";

	.page-container {
		padding: 36rpx;

	}

	.header {
		background-color: #3d7ef9;
		color: #ffffff;
		border-radius: 36rpx;
		padding: 32rpx 64rpx;
	}

	.header-air {
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}

	.header-title {
		display: flex;
		justify-content: space-between;
		font-size: 64rpx;
		margin-top: 12rpx;
	}

	.header-title1 {
		display: flex;
		justify-content: space-between;
		font-size: 34rpx;
		margin-top: 12rpx;
	}

	.header-ad0 {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-top: 36rpx;
	}

	.header-ad-onst {}

	.img {}

	.header-ad-onst-time {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		margin-top: 18rpx;
	}

	.data-container {
		margin-top: 36rpx;
		display: grid;
		justify-content: center;
		grid-template-columns: repeat(auto-fill, 300rpx);
		grid-gap: 36rpx
	}

	.data-card {
		background-color: #ffffff;
		height: 160rpx;
		box-shadow: #d6d6d6 0 0 8rpx;
		border-radius: 36rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 18rpx;
	}

	.data-card-icon {
		width: 72rpx;
		height: 72rpx;
		padding: 20rpx;
	}

	.data-card-title {
		font-size: 28rpx;
		color: #7f7f7f;
	}

	.data-card-value {
		font-size: 48rpx;
		margin-top: 28rpx;
		font-weight: bold;
		color: #7f7f7f;
		white-space: nowrap;
	}
</style>